<template>
  <div class="container coupon">
    <!-- <van-nav-bar
      title="商场活动"
      left-text=""
    /> -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="coupon-list-row">
        <van-list
          v-model="loading"
          :finished="finished"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多数据了"
          @load="getActivitys"
        >
          <div class="coupon-list" v-for="(item,index) in couponList" :key="index">
            <div class=""> 
              <div class="coupon-list-main-left">
                <div class="imgs" v-if="item.Photo" :style="{backgroundImage:'url(' + item.Photo + ')'}"></div>
                <div class="imgs" v-else style="background-image:url('//i1.mallcoo.cn/sp_mall/6a45na11-b6ec-4b90-85d8-a781f20f3677_750x340_1_0_80.jpg');"></div>
              </div>
              <div class="coupon-list-main">
                <div class="coupon-name">{{item.Name}}</div>
                <div class="coupon-type">{{item.Remark}}</div>
                <div class="coupon-desc">活动时间：{{item.StartTimeStr}} - {{item.EndTimeStr}}</div>
                <div class="get-btn" v-if="item.Type == 0">
                  <van-button type="info" class="login-btn" @click="joinActivity(item.Id)" size="small">领取</van-button>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
//import { msToDate } from '@/until/until';
export default {
  name: 'integral',
  data() {
    return {
      isLoading: false,
      loading: false,
      error: false,
      finished: false,
      couponList:[]
    };
  },
  mounted() {
    // this.getActivitys();
  },
  methods: {
     onClickLeft() {
      this.$router.go(-1);
    },
    onRefresh() {
      setTimeout(() => {
        this.getActivitys();
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 500);
    },
    getActivitys(){
      this.$api.mine.getActivitys({   
      }).then(res=> {
        this.couponList = res.Data;
         // 加载状态结束
        this.loading = false;
         // 数据全部加载完成
        this.finished = true;
      }).catch(() => {
        this.error = true;
      })    
    },
    joinActivity(id){
      sessionStorage.setItem('redirectUser','redirectUser');
      let params = {activityId:id}
      this.$api.mine.joinActivity(params).then(res=> {
        if(res.IsSuccess){
          this.$toast('领取成功');
           sessionStorage.removeItem('redirectUser');
        }
      })    
    },
    getActivitysCoupon(id){
      localStorage.setItem('redirect',window.location.href);
      this.$api.mine.getActivitysCoupon(id).then(res=> {
        if(res.IsSuccess){
          this.$toast('领取成功');
        }else{
          // let href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe320359a5af696ca&redirect_uri=https://easyget.vip?redirect=activity/&response_type=code&scope=snsapi_userinfo&state=userType0#wechat_redirect' //测试
          // //console.log(href)
          // //console.log(window.location);
          // window.open(href);
        }
      })    
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.coupon {
  height: auto;
  .coupon-list-row {
    margin-top: .133333rem;
    .coupon-list {
      background-color: #fff;
      font-size: .373333rem;
      margin-bottom: .266667rem;
      .imgs{
        width: 100%;
        background-size: cover;
        background-position: center center;
        height: 4.266667rem;
      }
      .coupon-list-main {
        padding: .266667rem;
      }
      .text-row{
        padding: .266667rem .4rem;
      }
      .coupon-name {
        font-size: .426667rem;
        margin-bottom: .106667rem;
      }
      .coupon-desc {
        margin-top: .133333rem;
        font-size: .32rem;
        color: #999;
      }
      .coupon-type {
        font-size: .32rem;
        color: #d28d0a;
        margin-top: .133333rem;
      }
      .get-btn{
        text-align:right;
        margin-top: .133333rem;
      }
      .text {
        font-size: .32rem;
        color: #999;
      }
      .coupon-money-row {
        color:#f44;
        font-size: .373333rem;
        .coupon-money {
          font-size: .64rem;
        }
      }
    }
  }
}
</style>